<template>
  <div class="taskLibraryPage">
    <div class="taskLibraryPage_left">
      <leftContainer ref="leftContainer" />
    </div>
    <div class="taskLibraryPage_right">
      <rightContainer
        ref="rightContainer"
        :csj-program-guid="csjProgramGuid"
        :four-list="fourList"
        :zjsyl="zjsyl"
        :xmwcjd="xmwcjd"
        :right-loading="rightLoading"
        :participants-list="participantsList"
        :csj-enterprise-name="csjEnterpriseName"
        :csj-program-name="csjProgramName"
        :report-status="reportStatus"
        :end-time="endTime"
        :start-time="startTime"
        :task-guid="taskGuid"
        :task-name="taskName"
        :remark="remark"
        :annex-ids="annexIds"
        :guid="guid"
      />
    </div>
  </div>

</template>

<script>
import leftContainer from './components/LeftContainer/index.vue';
import rightContainer from './components/RightContainer/index.vue';
export default {
  components: {
    leftContainer,
    rightContainer
  },
  data() {
    return {
      annexIds: '',
      reportStatus: '',
      startTime: '',
      endTime: '',
      taskGuid: '',
      taskName: '',
      remark: '',
      csjProgramName: '',
      csjProgramGuid: 0,
      csjEnterpriseName: '',
      zjsyl: 0,
      xmwcjd: 0,
      rightLoading: false,
      fourList: [],
      participantsList: [],
      guid: ''
    };
  }

};
</script>

<style scoped lang='scss'>
  .taskLibraryPage{
    padding: 10px;
    display: flex
  }
  .taskLibraryPage_left {
  width: 15%;
}
.taskLibraryPage_right {
  width: 85%;
}
.taskLibraryPage_right_roughly{
  display: flex
}
.taskLibraryPage_right_roughly_left{
  flex:5
}
.taskLibraryPage_right_roughly_right{
  flex:1
}

</style>
